<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <el-page-header
        style="background-color: #0096dc; color: white; line-height: 60px"
        @back="goBack"
        content="添加商品"
      >
      </el-page-header>
      <el-card style="width: 600px; height: 700px; margin: 0 auto">
        <el-form label-width="80px">
          <el-form-item label="商品标题">
            <el-input type="text"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input type="text"></el-input>
          </el-form-item>
          <el-form-item label="商品原价">
            <el-input type="text"></el-input>
          </el-form-item>
          <el-form-item label="商品销量">
            <el-input type="text"></el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input type="text"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select placeholder="请选择">
              <el-option label="精彩活动" value="1"></el-option>
              <el-option label="精品女装" value="2"></el-option>
              <el-option label="品牌男装" value="3"></el-option>
              <el-option label="医药健康" value="4"></el-option>
              <el-option label="数码科技" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="insert()">添加商品</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          dialogImageUrl: "",
          dialogVisible: false,
        };
      },
      methods: {
        goBack() {
          v.$message("返回");
          history.back();
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        insert() {
          v.$message("添加成功");
        },
      },
    });
  </script>
</html>
